/* eslint-disable no-unused-vars */
/* eslint-disable implicit-arrow-linebreak */
import themeConfig from '@configs/themeConfig'
import { Icon } from '@iconify/react'
import { useNavigate } from 'react-router-dom'
import { Card, CardBody } from 'reactstrap'
import { termOfServices } from './constant'
const TermOfServices = () => {
  const navigate = useNavigate()
  const start = ''
  const handleOpenWindows = (link) => {
    window.open(link, '_blank')
  }
  return (
    <Card>
      <div className="p-2 d-flex align-items-center bg-yellow justify-content-center ">
        <img
          src={themeConfig.app.appLogoImage}
          alt="logo-dark"
          height={60}
          width={60}
        />
        <h2 className=" mb-0">ethera</h2>
      </div>
      <div className=" px-2 py-1 bg-yellow page-header xSmall-up-between">
        <div className="page-header--title d-f-center">
          <Icon
            className="page-header--title__leftArrow"
            icon="bx:chevron-left"
            width="40"
            height="40"
            onClick={() => navigate(-1)}
          />
          <span className="heading-1 display-1">Terms of Service </span>
        </div>
      </div>
      <CardBody className="privacy-policy-body">
        <div className="bg-white privacy-policy-pd">
          <p className="black line-height-2 font-bold pb-1">
            Effective date: January 1, 2020
          </p>
          <h1 className="tos">
            Ethera Care Inc. Terms of <br />
            Service
          </h1>
          <p className="black py-2 line-height-2">
            This Terms of Service Agreement (the “
            <span className="underline">Agreement</span>
            ”) is a legal agreement between you and Ethera Care, Inc., a
            Delaware Corporation (“ <span className="underline">Company</span>”
            or “<span className="underline">we</span>” or “
            <span className="underline">us</span>”) for use of the Ethera
            website found at https://www.myethera.com/ (“
            <span className="underline">Site</span>”), the related mobile
            applications (“ <span className="underline">Applications</span>”),
            and all services, features and content offered by the Company
            (collectively, the “<span className="underline">Service</span>”).
            Our users include our healthcare service providers who use the
            Service as a medium to provide services to their patients (“
            <span className="underline">Providers</span>”), as well as patients
            and prospective patients who use the Service to connect with or
            search for healthcare providers (“
            <span className="underline">Clients</span>”). Providers may be
            individuals or entities. All users of the Service may be
            collectively referred to herein as “
            <span className="underline">you</span>” or “
            <span className="underline">User</span>”.
          </p>
          <ol className="privacy-policy-ol-list">
            {termOfServices.map(
              ({
                title,
                description,
                points,
                paragraph,
                additional_points,
                additional_paragraph
              }) => (
                <>
                  <li className="black line-height-2 font-bold">{title}</li>
                  <p className="pb-2 black line-height-2">{description}</p>
                  <ul className="ul-points">
                    {points?.map(({ point, nested_points }) => (
                      <>
                        <li className="black line-height-2">{point}</li>
                        <ul className="ul-points">
                          {nested_points?.map(({ point }) => (
                            <li className="black line-height-2">{point}</li>
                          ))}
                        </ul>
                      </>
                    ))}
                  </ul>
                  {paragraph && (
                    <p className="pb-2 black line-height-2"> {paragraph} </p>
                  )}
                  <ul className="ul-points">
                    {additional_points?.map(({ point }) => (
                      <li className="black line-height-2"> {point} </li>
                    ))}
                  </ul>
                  {additional_paragraph && (
                    <p className="black line-height-2">
                      {additional_paragraph}
                    </p>
                  )}
                </>
              )
            )}
          </ol>
          <hr className="horizantel-row-privacy" />
          <footer>
            <nav className="privacy-policy-footer-nav">
              <div className="privacy-policy-footer">
                <ul
                  className="d-flex "
                  style={{ listStyle: 'none', gap: '1rem' }}
                >
                  <li
                    className="facebook-pd pointer"
                    onClick={() =>
                      handleOpenWindows('https://www.facebook.com/my.ethera')
                    }
                  >
                    <a>
                      <Icon
                        icon="brandico:facebook"
                        fontSize={20}
                        color="white"
                      />
                    </a>
                  </li>
                  <li
                    className="pointer"
                    onClick={() =>
                      handleOpenWindows('https://www.instagram.com/my.ethera/')
                    }
                  >
                    <a>
                      <Icon
                        icon="ri:instagram-line"
                        fontSize={20}
                        color="white"
                      />
                    </a>
                  </li>
                  <li
                    className="pointer"
                    onClick={() =>
                      handleOpenWindows(
                        'https://www.linkedin.com/company/myethera/'
                      )
                    }
                  >
                    <a>
                      <Icon icon="ri:linkedin-fill" fontSize={20} />
                    </a>
                  </li>
                </ul>
              </div>
              <div>
                <p className='black  line-height-2"'>
                  Copyright &#169; 2023 Ethera. All rights reserved.
                </p>
              </div>
            </nav>
          </footer>
        </div>
      </CardBody>
    </Card>
  )
}

export default TermOfServices
